<template>
  <div class="white_div">
    <div class="dashboard">
      <div class="chart">
        <div class="left_data">
          <p>所有靶场</p>
          <h3>{{ total }}</h3>
        </div>
        <div class="right_img">
          <el-image :src="img.src1"></el-image>
        </div>
      </div>
      <div class="chart">
        <div class="left_data">
          <p>用户数</p>
          <h3>{{ persontotal }}</h3>
        </div>
        <div class="right_img_two">
          <el-image :src="img.src2"></el-image>
        </div>
      </div>
      <div class="chart">
        <div class="left_data">
          <p>赛事数</p>
          <h3>{{ comtotal }}</h3>
        </div>
        <div class="right_img_two">
          <el-image :src="img.src3"></el-image>
        </div>
      </div>
      <div class="chart">
        <div class="left_data">
          <p>新闻</p>
          <h3>{{ newstotal }}</h3>
        </div>
        <div class="right_img_two">
          <el-image :src="img.src4"></el-image>
        </div>
      </div>
    </div>
  
    <div class="bottom_echart">
      <div id="chart" class="box" ref="main"></div>
      <div class="map" ref="box" style="width: 500px; height: 400px"></div>
    </div>
    <div class="middle">
      <div class="zhexian" ref="zhexian"></div>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapMutations } = createNamespacedHelpers("tags");
import * as echarts from "echarts";
import { mapData } from "@/assets/data/map";
export default {
  data() {
    return {
      conuty: [],
      counarr: [],
      total: 0,
      persontotal: 0,
      newstotal: 0,
      comtotal: 0,
      transdata: {
        pageSize: 5,
        currentPage: 1,
        // 暂时死数据
      },
      img: {
        src1: require("@/assets/ranges.png"),
        src2: require("@/assets/person.png"),
        src3: require("@/assets/com.png"),
        src4: require("@/assets/news.png"),
      },
    };
  },
  methods: {
    ...mapMutations(["addTabs"]),
    async getcompetes() {
      const info = await this.$api.user.competes(this.transdata);
      console.log('ccc', info);
      this.comtotal = info.data.selCompeteVOS.total
    },
    async getnews() {
      const info = await this.$api.user.news(this.transdata);
      console.log('news', info);
      this.newstotal = info.data.newList.total
    },
    async getPerson() {
      const result = await this.$api.person.allPerson(this.transdata);
      console.log("===result用户数量===", result);
      // this.list = result.data.userList;
      this.persontotal = result.data.total;
    },
    async getRanges() {
      const result = await this.$api.ranges.getRange(this.transdata);
      console.log("===result===", result);
      this.total = result.data.total;
      console.log("abcdefg", this.total);
    },
    async getgroup() {
      const info = await this.$api.user.group();
      console.log(info);
      this.conuty = info.data.location;
      console.log("根据国家地区搜索", this.conuty);
      // this.counarr=
    },
    getcounty() {
      let chart = echarts.init(this.$refs.main);

      let options = {
        legend: {
          type: "scroll",
          orient: "vertical",
          show: true,
          right: 0,
          top: 20,
          bottom: 20,
          textStyle: {
            fontSize: 7,
          },
        },
        series: [
          {
            type: "pie",
            data: this.conuty,
            label: {
              show: true,
              formatter: function (arg) {
                return (
                  arg.name + "用户占" + arg.value + "人\n" + arg.percent + "%"
                );
              },
            },
            selectedMode: "single",
            radius: ["50%", "80%"],
            itemStyle: {
              normal: {},
            },
          },
        ],
      };
      chart.setOption(options);
    },
    getmap() {
      echarts.registerMap("chinaMap", mapData);
      let options = {
        geo: {
          type: "map",
          map: "chinaMap",
          zoom: 2,
          roam: true,
          label: { show: true, fontSize: 10 },
        },
        visualMap: {
          min: 1,
          max: 15,
          text: ["高", "低"],
          realtime: false,
          calculable: true,
          inRange: {
            color: ["lightskyblue", "yellow", "orangered"],
          },
        },
        series: [
          {
            name: "最小风险指数",
            type: "map",
            geoIndex: 0,
            data: this.conuty,
          },
        ],
      };
      let chart = echarts.init(this.$refs.box);
      chart.setOption(options);
    },
    getzhexian() {
      let chart = echarts.init(this.$refs.zhexian);
     let option = {
        color: ['#32E5FF'],
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: '30%',
          left: '10%',
          right: '10%',
          bottom: '20%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [
            'mon',
            'tues',
            'wednes',
            'thurs',
            'fri',
            'satur',
            'sun'
          ],
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(20, 35, 87, 1)'
            }
          },
          boundaryGap: true, // 坐标两侧是否留白
          axisTick: {
            show: false  // 是否显示刻度线
          }
        },
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              color: '#FF44AA', // y 轴文字颜色
              formatter: '{value}  '
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#E6E6FA'  // y 轴轴线颜色
              }
            },
            splitLine: {
              lineStyle: {
                color: '#FFDEAD', //grid 区域中的分隔线颜色
                width: 1,
                type: 'solid'
              }
            }
          },
          {
            type: 'value',
            name: '(浏览量)',
            position: 'left',
            alignTicks: true,
            nameGap: 8,
            axisLine: {
              show: false  // 是否显示 y 轴轴线
            },
            axisLabel: {
              formatter: '{value}'
            },
            nameTextStyle: {
              padding: [0, 10, 8, 0] // 单位位置
            }
          }
        ],
        series: [
          {
            type: 'line',
            name: '折线图',
            data: ['10', '20', '26', '35', '26', '17', '19'],
            label: {
              show: true,
              position: 'top',
              formatter: '{c} ',
              color: '#00DDAA',
              fontSize: '10px',
              fontFamily: 'ArialMT'
            },
            itemStyle: {
              color: '#FFE4E1', // 数据颜色
              gradientColorNum: 1
            },
            areaStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0.1,
                    color: 'rgba(6, 252, 254, 0.1) ' // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(6, 252, 254, 0.5)' // 0% 处的颜色
                  },
                  {
                    offset: 0.7,
                    color: 'rgba(6, 252, 254, 0.3)' // 0% 处的颜色
                  },
                  {
                    offset: 0.9,
                    color: 'rgba(0,0,0, 0.1)' // 100% 处的颜色
                  }
                ]
              }
            }
          }
        ]
      };
      chart.setOption(option);
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.addTabs(to)
    })
  },
  created() {
    this.getgroup();
    this.getRanges();
    this.getPerson();
    this.getnews();
    this.getcompetes()
  },
  watch: {
    conuty: {
      handler(newVal) {
        this.getcounty();
        this.getmap();
        this.getzhexian();
      },
    },
  },
};
</script>

<style scoped>
.bottom_echart {
  display: flex;
}

.map {
  border: 1px #edf1f7 solid;
  border-radius: 0.2604vw;
}

.box {
  width: 600px;
  height: 400px;
  border: 1px #edf1f7 solid;
  margin-right: 4.5833vw;
  border-radius: 0.2604vw;
}
.zhexian{
  width: 900px;
  height: 300px;
  margin-right: 4.5833vw;
  border-radius: 0.2604vw;
}

.dashboard {
  display: flex;
  width: 76vw;
  height: 7.7vw;
  margin-bottom: 3vw;
}

.chart {
  width: 18vw;
  margin-right: 2vw;
  border: 1px solid #edf1f7;
  box-shadow: 4px 5px 5px #edf1f7;
  display: flex;
  border-radius: 0.2604vw;
}

.left_data {
  margin-top: 0.4vw;
  width: 9vw;
  color: #999;
  font-weight: 600;
  /* font-size: 28px; */
}

.right_img {
  margin-top: 1vw;
  width: 5vw;
}

.right_img_two {
  margin-top: 1.6vw;
  width: 5vw;
}

p {
  font-size: 1.2vw;
}

h3 {
  font-size: 1.5vw;
}

.white_div {
  background-color: #fff;
  padding: 2.6042vw;
}</style>